<template>
  <div class="app-container">
    <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
      <!--   充值时间   -->
      <el-form-item  :label="$t('language.finance.recharge.rechargeTime')" prop="time">
        <el-date-picker
          v-model="formInline.time"
          type="datetimerange"
          align="right"
          unlink-panels
          :range-separator="$t('language.finance.recharge.to')"
          :start-placeholder="$t('language.finance.recharge.startDate')"
          :default-time="['00:00:00', '23:59:59']"
          :end-placeholder="$t('language.finance.recharge.endDate')"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>

      <!--   存款金额   -->
      <el-form-item :label="$t('language.finance.recharge.depositAmount')">
        <el-col :span="11">
          <el-form-item prop="minAmount">
            <el-input @keyup.enter.native="formatSearch" v-model="formInline.minAmount" type="number" :placeholder="$t('language.finance.recharge.inputPrompt')"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
        <el-col :span="11">
          <el-form-item prop="maxAmount">
            <el-input @keyup.enter.native="formatSearch" v-model="formInline.maxAmount" type="number" :placeholder="$t('language.finance.recharge.inputPrompt')"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>

      <!--   操作端   -->
      <el-form-item :label="$t('language.finance.recharge.operationEnd')" prop="clientType">
        <el-select v-model="formInline.clientType" :placeholder="$t('language.finance.recharge.operationEndPrompt')">
          <el-option
            v-for="item in $t('language.finance.consts.PAYMENT_PLATFORM')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!--   存款类型   -->
      <el-form-item :label="$t('language.finance.recharge.depositType')" prop="limitType">
        <el-select
          v-model="formInline.limitType"
          :placeholder="$t('language.finance.publicFilters.selectDeposit')"
        >
          <el-option
            v-for="item in $t('language.finance.consts.DEPOSIT_TYPE')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!--   收款商户   -->
      <el-form-item :label="$t('language.finance.recharge.receiptMerchant')"  prop="merchant">
        <el-select v-model="formInline.merchant" filterable :placeholder="$t('language.finance.recharge.SelectMerchant')">
          <el-option
            v-for="(item, index) in rechargeShopList"
            :label="item.channelName"
            :key="index"
            :value="item.channelId"
          ></el-option>
        </el-select>
      </el-form-item>

      <!--   支付状态   -->
      <el-form-item :label="$t('language.finance.recharge.paymentStatus')" prop="status">
        <el-select
          v-model="formInline.status"
          multiple
          collapse-tags
          :placeholder="$t('language.finance.publicFilters.selectPaymentStatus')">
          <el-option
            v-for="item in $t('language.finance.consts.AUTO_PAYMENT_STATUS')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
        <!--<el-cascader-->
        <!--:placeholder="$t('language.finance.publicFilters.selectPaymentStatus')"-->
        <!--v-model="formInline.payStatus"-->
        <!--:options="$t('language.finance.consts.PAYMENT_STATUS')"-->
        <!--:props="{ multiple: true, expandTrigger: hover }"-->
        <!--collapse-tags-->
        <!--clearable></el-cascader>-->
      </el-form-item>

      <!--   支付类型   -->
      <el-form-item :label="$t('language.finance.recharge.paymentTypes')" prop="paymentId">
        <el-select v-model="formInline.paymentId" :placeholder="$t('language.finance.publicFilters.selectPaymentType')">
          <el-option
            v-for="item in $t('language.finance.consts.RECHARGE_THIRD_TYPE_NAMES')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!--   充值单号等   -->
      <el-form-item class="with-pre-select" prop="keywords">
        <el-input @keyup.enter.native="formatSearch" :placeholder="$t('language.finance.publicFilters.keyword')" v-model="formInline.keywords" class="input-with-select">
          <el-select
            @change="onChangeSearchType"
            v-model="formInline.searchType"
            slot="prepend"
            placeholder="查询范围"
          >
            <el-option :label="$t('language.finance.recharge.rechargeNumber')" :value="1"></el-option>
            <el-option :label="$t('language.finance.recharge.accountName')" :value="2"></el-option>
            <el-option :label="$t('language.finance.recharge.name')" :value="3"></el-option>
            <el-option :label="$t('language.finance.recharge.phoneNumber')" :value="4"></el-option>
            <el-option :label="$t('language.finance.recharge.receiptMerchantNumber')" :value="5"></el-option>
            <el-option :label="$t('language.finance.recharge.thirdPartyRechargeOrderNumber')" :value="6"></el-option>
          </el-select>
        </el-input>
      </el-form-item>

      <!--   账户类型   -->
      <el-form-item  :label="$t('language.finance.recharge.accountType')" prop="userType">
        <el-select
          v-model="formInline.userType"
          :placeholder="$t('language.finance.publicFilters.accountType')"
        >
          <el-option
            v-for="item in $t('language.finance.consts.USER_TYPE')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!--   层级   -->
      <el-form-item :label="$t('language.finance.recharge.level')" prop="level">
        <el-select v-model="formInline.level" multiple collapse-tags :placeholder="formInline.level?'':$t('language.finance.publicFilters.selectLevel')">
          <el-option
            v-for="item in levelList"
            :label="item.name"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="formatSearch"
      >
        {{ $t('language.table.search') }}
      </el-button>
      <el-button @click="onClickResetForm('ruleForm')">{{ $t('language.table.reset') }}</el-button>
    </el-form>
  </div>

</template>

<script>
// services
import { getUserLevelList } from '@/services/api/userLevel';
import { getUserGroupList } from '@/services/api/userGroup';
import { getPaymentManageChannelList } from '@/services/api/recharge';

// mixins
import { form, grid, pickerOption } from '@/build';
import setOrderStatus from './mixins/setOrderStatus';

export default {

  name: 'form-filter',
  mixins: [form, grid, pickerOption, setOrderStatus],
  data() {
    return {

      auditApplyList: [],
      levelList: [],
      rechargeShopList: [],
      groupList: [],
      formInline: {

        dateType: 1,
        searchType: 1,
        limitType: -1,
        clientType: -1,
        time: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
        minAmount: null,
        maxAmount: null,
        merchant: null,
        paymentId: -2,
        status: [0, 5, 6, 3],
        keywords: null,
        userType: -1,
        level: [],
      },

    };
  },
  methods: {
    // 搜索
    formatSearch() {
      let level = [];
      let { status } = this.formInline;
      if (this.formInline.level.length > 0) {
        level = this.formInline.level.join();
      }
      if (status.length === 0) {
        status = [0, 5, 6, 3];
      }
      const filters = this.setOrderStatus({ ...this.formInline, status }, [0, 3], [5, 6]);
      const formInline = _.cloneDeep(this.formInline);
      // let payStatus = _.cloneDeep(this.formInline.payStatus);
      // if (!_.isEmpty(payStatus)) {
      //   payStatus = payStatus.join(',');
      //   payStatus = _.uniq(payStatus.split(',')).join(','); // 在选择支付失败的时候包含了用户撤销与超时撤销，去掉重复的状态
      // } else {
      //   payStatus = '0,5,6,7';
      // }
      this.$emit('on-filter', { ...formInline, ...filters, level });
    },
    onChangeSearchType() {
      this.formInline.keywords = null;
    },
    onClickResetForm(formName) {
      this.resetForm(formName);
      this.formatSearch();
    },
    // onClickSearch() {
    //   this.$emit('on-filter', this.formInline);
    // },
  },
  mounted() {
    this.bindGet(getPaymentManageChannelList, 'rechargeShopList', { });
    this.bindGet(getUserLevelList, 'levelList', { });
    this.bindGet(getUserGroupList, 'groupList', { });// todo 2-获取群组
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
